<template>
	<div class="user" style="margin-top: 60px;">
		<el-form :inline="true">
			<el-form-item>
				<el-input placeholder="手机号/邮箱/会员昵称" size="mini" v-model="keyword"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="levelId" size="mini" placeholder="请选择">
					<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="success" size="mini" @click="addForm=true">添加会员</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="info" size="mini" @click="getUser">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button size="mini">高级搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- 会员列表 -->
		<el-table :data="userlist" border style="width: 100%; text-align: center;">
			
			<el-table-column prop="" label="会员">
				<template slot-scope="scope">
					<div style="display: flex;align-items: center;">
						<img :src="scope.row.avatar" style="width: 60px;height: 60px;" />
						<div style="margin-left: 10px;">
							<p>{{scope.row.username}}</p>
							<p><span>用户名id:</span>{{scope.row.id}}</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="user_level.name" label="会员等级">
			</el-table-column>
			<el-table-column prop="address" label="注册时间">
				<template slot-scope="scope">
					注册时间：
					<span>{{scope.row.create_time}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="状态">
				<template slot-scope="scope">
					<el-button type="danger" plain size="small" v-if="scope.row.status==1" @click="start(scope.row)">禁用</el-button>
					<el-button type="success" plain size="small" @click="start(scope.row)" v-else>启用</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作">
				<template slot-scope="scope">
					<el-button type="text">修改</el-button>
					<el-button type="text" @click="remove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination style="width: 100%;padding: 20px;border: 1px solid #DDDDDD;box-sizing: border-box;position: absolute;bottom: 0px;left: 200px; background-color: #fff;"
		 @size-change="changesize" @current-change="changepage" :current-page="page" :page-sizes="[10,20,30,40]" :page-size="limit"
		 layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 添加会员 -->
		<el-dialog title="添加会员" :visible.sync="addForm">
			<el-form :model="addUser">
				<el-form-item label="用户名"  :label-width="'80px'">
					<el-input v-model="addUser.username" size="mini" ></el-input>
				</el-form-item>
				<el-form-item label="密码" :label-width="'80px'">
					<el-input v-model="addUser.password" size="mini" ></el-input>
				</el-form-item>
				<el-form-item label="昵称"  :label-width="'80px'">
					<el-input v-model="addUser.nickname" size="mini" ></el-input>
				</el-form-item>
				<el-form-item label="头像" :label-width="'80px'">
				  <el-button icon="el-icon-plus" v-if="addUser.avatar==''" @click="setImage=true"></el-button>
				  <el-image :src="addUser.avatar" v-else style="width: 80px;border-radius: 5px;" @click="setImage=true"></el-image>
				</el-form-item>
				<el-form-item label="会员等级" :label-width="'80px'">
					<el-select v-model="addUser.user_level_id" size="mini" placeholder="请选择">
						<el-option v-for="item in userlevel" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item >
				<el-form-item label="手机" :label-width="'80px'">
					<el-input v-model="addUser.phone" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" :label-width="'80px'">
					<el-input v-model="addUser.email" size="mini"></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="'80px'">
					<el-radio-group v-model="addUser.status" size="mini">
						<el-radio :label="1" border>启用</el-radio>
						<el-radio :label="0" border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addForm = false">取 消</el-button>
				<el-button type="primary" @click="adduser('userForm')">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 相册管理模态框 -->
		<el-dialog title="图片管理" :visible.sync="setImage" width="80%" @open="getAside">
			<div class="imagelist">
				<el-container>
					<!-- 头部导航 -->
					<el-header>
						<el-form :inline="true">
							<el-form-item>
								<el-input placeholder="输入图片名称" size="mini" v-model="keyword"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="success" size="mini" @click="getAside">搜索</el-button>
							</el-form-item>
						</el-form>
					</el-header>
					<el-container>
						<!-- 左侧菜单 -->
						<el-aside width="200px" >
							<ul class="aside-list">
								<li v-for="(item,index) in aside" :class="{act:cid==item.id}" @click="changeLeft(item.id)">
									<p>{{item.name}}</p>
								</li>
							</ul>
						</el-aside>
						<el-container style="width: 100%;">
							<!-- 主要内容 -->
							<el-main>
								<div class="picture">
									<div class="images-main" v-for="(item,index) in imglist">
										<div class="img">
											<el-image :src="item.url" style="width: 100%; height: 175px; " @click="selectImg(item.url)" />
											<p class="image_name">{{item.name}}</p>
										</div>
									</div>
								</div>
							</el-main>
						</el-container>
					</el-container>
				</el-container>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 会员列表
				userlist: [],
				// 会员等级
				userlevel: [],
				levelId: "",
				keyword: "",
				// 分页
				page: 1,
				limit: 10,
				total: 0,
				// 会员添加
				addForm: false,
				addUser: {
					username: "",
					password: "",
					nickname: "",
					avatar: "",
					phone: "",
					email: "",
					user_level_id: "",
				},
				// 图片管理
				setImage:false,
				// 左侧分类列表
				aside: [],
				cid: "", //相册分类id
				imglist: [],
				status: 0,
			}
		},
		mounted() {
			this.getUser();
			this.getAside();
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 获取会员列表数据
			getUser() {
				this.$axios.get(`/api/user/${this.page}?limit=${this.limit}&keyword=${this.keyword}&user_level_id=${this.levelId}`)
					.then(res => {
						console.log(res)
						this.userlist = res.data.list;
						this.userlevel = res.data.user_level;
						// 总长度
						this.total = res.data.totalCount;
					}).catch(error => {
						console.log(error)
					})
			},
			// 分页
			changesize(size) {
				this.limit = size;
				this.getUser();
			},
			changepage(page) {
				this.page = page;
				this.getUser();
			},
			// 添加会员
			adduser() {
				this.$axios.post('/api/user',this.addUser).then(res=>{
					console.log(res)
					this.$message.success("添加成功");
					this.getUser();
					this.addForm = false
				}).catch(error=>{
					console.log(error.response.data.msg)
				})
			},
			// 删除会员
			remove(id) {
				this.$confirm('确定删除吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post(`/api/user/${id}/delete`).then(res => {
						console.log(res)
						this.getUser();
					})
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 修改会员状态
			start(row) {
				console.log(row)
				let status = row.status === 1 ? 0 : 1
				let msg = status === 1 ? '启用' : '禁用'
				this.$axios.post(`/api/user/${row.id}/update_status`,{status:status}).then(res => {
					console.log(res)
					row.status=status;
					this.getUser();
				}).catch(error=>{
					console.log(error.response.data.msg);
				})
			},
			
			// 获取左侧菜单数据
			getAside() {
				this.$axios.get('/api/imageclass/1').then(res => {
					console.log(res)
					this.aside = res.data.list;
					this.cid = res.data.list[0].id;
					this.getImages();
				}).catch(error => {
					console.log(error)
				})
			},
			// 获取右侧相册数据
			getImages() {
				this.$axios.get(
						`/api/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`)
					.then(res => {
						console.log(res)
						this.imglist = res.data.list;
						this.total = res.data.totalCount;
					}).catch(error => {
						console.log(error)
					})
			},
			// 点击左侧菜单切换相册分类
			changeLeft(id) {
				this.cid = id;
				this.page = 1;
				this.getImages();
			},
			// 选择头像
			selectImg(url){
				this.addUser.avatar=url;
				this.setImage=false;
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 10px;
		box-sizing: border-box;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.imagelist{
		.el-header {
			border-bottom: 1px solid #dee2e6;
			display: flex;
			justify-content: space-between;
			padding-top: 10px;
			box-sizing: border-box;
		}
		
		.el-footer {
			line-height: 60px;
			border-bottom: 1px solid #dee2e6;
		}
		
		.el-aside {
			border-right: 1px solid #dee2e6;
			border-bottom: 1px solid #dee2e6;
		
			.aside-list {
				width: 100%;
				padding: 0px;
				margin: 0px;
				
				.act{
					background-color: #f0f9eb;
					color: #67C23A;
					border-color: #c2e7b0;
				}
		
				li {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 7px;
					box-sizing: border-box;
					border-bottom: 1px solid #DDDDDD;
					cursor: pointer;
				}
			}
		}
		
		.el-main {
			border-bottom: 1px solid #dee2e6;
		
			.picture {
				display: flex;
				flex-wrap: wrap;
		
				.images-main {
					width: 16%;
					height: 220px;
					border: 1px solid #DDDDDD;
					margin-left: 10px;
					background-color: #fff;
					margin-bottom: 10px;
		
					.btns {
						padding: 6px;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
					}
		
					.img {
						position: relative;
						border-bottom: 1px solid #DDDDDD;
		
						.image_name {
							width: 175px;
							color: #fff;
							padding: 8px;
							box-sizing: border-box;
							position: absolute;
							top: 135px;
							font-size: 12px;
							background-color: rgba(0, 0, 0, .5);
						}
					}
				}
			}
		}
	}
</style>
